<template>
  <div v-if="sectionId">
    <el-select v-model="classIdval" placeholder="请选择班级" @change="sectionChange" class="w-140" size="small">
      <el-option :label="item.class_name" :value="item.id" v-for="(item, index) in classesList"
                 :key="item.id"></el-option>
    </el-select>
  </div>
</template>
<script>
  import api from '@/utils/api.js'
  import {pagination} from '@/utils/util.js'

  export default {
    name: 'classinput',
    props: ['sectionId', 'classId'],
    data () {
      return {
        classIdval: this.classId,
        classesList: [],
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        }
      }
    },
    created () {
      this.initFn()
    },
    watch: {
      classId () {
        this.classIdval = this.classId
      },
      sectionId () {
        this.initFn()
      }
    },
    methods: {
      initFn () {
        this.$fetch(api.user_classesindex, {p: this.page.pageindex, section_id: this.sectionId}).then((response) => {
          if (response.code === 0) {
            this.classesList = response.list.data
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      sectionChange () {
        this.$emit('update:classId', this.classIdval)
      }
    },
    mounted () {
    }
  }
</script>
